<template>
	<view>
		<view style="position: absolute; top: 0; left: 5%; width: 90%; height: 80rpx;  z-index: 9;">
			<view class="fanhui_betn" @click="fanhui()">
				<image src="/static/shouye/容器@1x.png" class="img_fanbtn"></image>
			</view>
			<view class="fanhui_betns" style="margin-left: 20px;">
				<image src="/static/shouye/组 348@1x.png" style="width: 100%; height: 100%;"></image>
			</view>
			<view class="fanhui_betns" style="margin-left: 20px; float: right;">
				<image src="/static/shouye/分享@2x.png" style="width: 100%; height: 100%;"></image>
			</view>
		</view>
		<view style="position: absolute; top: 80rpx; left: 5%; width: 90%; height: 80rpx;  z-index: 9;">
			<view
				style="width: 290rpx;height: 45rpx;float: left; margin-top: 20rpx; border-radius: 30rpx;opacity: 1;background: #DDF1FF;color: #1684FC;font-size: 26rpx;">
				<image src="/static/dwt.png"
					style="width: 24rpx; height: 24rpx; float: left; margin-left: 20rpx; margin-top: 10rpx; ">
				</image>
				{{datadiceng}} 剩余 {{listtabbuild.length}} 幢
			</view>

			<view class="fanhui_betns" style="margin-left: 20px; float: right; margin-top: 10px;"
				@click="toggles('bottom')">
				<image src="/static/组 361@1x.png" style="width: 100%; height: 100%;"></image>
			</view>
		</view>
		<view style="position: absolute; top:180rpx; left: 5%; width: 90%; height: 80rpx;  z-index: 9;">

			<view class="fanhui_betns" style="margin-left: 20px; float: right;" @click="toggle('bottom')">
				<image src="/static/组 360@1x.png" style="width: 100%; height: 100%;"></image>
			</view>
		</view>
		<view style="position: absolute; top:270rpx; left: 5%; width: 90%; height: 80rpx;  z-index: 9;">

			<view class="fanhui_betns" style="margin-left: 20px; float: right;">
				<image src="/static/shouye/组 683@2x.png" style="width: 100%; height: 100%;"></image>
			</view>
		</view>
		<view v-if="zhengce == true"
			style="position: absolute; top:270rpx;right:30rpx; width: 469rpx;height: 448rpx;border-radius: 20px;opacity: 1;background: #FFFFFF;  z-index: 9999999999999999999999999;">
			<image src="/static/shouye/kjzc.png" style="width: 90%; height: 40rpx; margin-top: 20rpx; left: 5%;"
				@click="zhengce = false"></image>
			<view style="font-size: 20rpx;color: #31343B;font-family: Source Han Sans; width: 90%; margin-top: 20rpx; margin-left: 5%;">
				（一）购置自用办公用房 500 平方米以上且符合条件的企业,可按购置金额一定比例给予商办去化支持,分年发放。

			</view>
			<view style="font-size: 20rpx;color: #31343B;font-family: Source Han Sans; width: 90%; margin-top: 5rpx; margin-left: 5%;">
				（二）社保参保人数超过10人且符合条件的企业，新招募员工拓展产业发展空间的，给予一定比例的扶持补贴。
			</view>
			<view style="font-size: 20rpx;color: #31343B;font-family: Source Han Sans; width: 90%; margin-top: 5rpx; margin-left: 5%;">

				（三）装修支持。企业新购置或新租赁的办公用房，在产业主管部门备案后，最高给予不超过500万元的一次性装修支持。
			</view>
			<image src="/static/shouye/gdzc.png" style="width: 283rpx; height: 40rpx; margin-top: 20rpx; left: 5%;">
			</image>
		</view>
		<uni-popup ref="popups">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view
					style="width: 100%; height: 1100rpx; background: #fff; border-top-right-radius:20px ; border-top-left-radius: 20px;">
					<view style="width: 90%; height: 100%; float: left; margin-left: 5%;">
						<view>
							<view style="float: left; margin-top: 20rpx;">周边配套</view>
							<image src="/static/guanbi.png"
								style="margin-top: 20rpx; width: 24rpx; height: 24rpx; float: right;"></image>
						</view>
						<view class="wuyeleixin" style="height: 1200rpx;">
							<view style="font-size: 24rpx; margin-left: 5%; margin-top: 20rpx;">
								<text style="color: #1684FC;">住房</text>
								<text style="color: #3D3D3D;">配套</text>
							</view>
							<view style="width: 100%; height: 100rpx; margin-top: 20rpx;">
								<view style="width: 25%; height: 100%; float: left; " @click="matTypebtn(4)">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/容器@1x (10).png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;">人才住房</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; " @click="matTypebtn(3)">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/学士帽@1x.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;">人才驿站</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; " @click="matTypebtn(2)">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/容器@1x (10).png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;">
										市场化
										</br>
										租赁住房</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; " @click="matTypebtn(1)">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/房屋信息@1x.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;">优质居住</br>
										空间</view>
								</view>
							</view>
							<view style="font-size: 24rpx; margin-left: 5%; margin-top: 20rpx;">
								<text style="color: #1684FC;">交通</text>
								<text style="color: #3D3D3D;">配套</text>
							</view>
							<view style="width: 100%; height: 100rpx; margin-top: 20rpx;">
								<view style="width: 25%; height: 100%; float: left; ">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/dtk.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;">地铁口</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; ">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/gjc.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;">公交车</view>
								</view>

							</view>
							<view style="font-size: 24rpx; margin-left: 5%; margin-top: 20rpx;">
								<text style="color: #1684FC;">生活</text>
								<text style="color: #3D3D3D;">配套</text>
							</view>
							<view style="width: 100%; height: 100rpx; margin-top: 20rpx;">
								<view style="width: 25%; height: 100%; float: left; ">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/sq.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;">商圈</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; ">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/cs.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;">超市</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; ">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/yy.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;">医院</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; ">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/xx.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;">学校</view>
								</view>
							</view>
							<view style="width: 100%; height: 100rpx; margin-top: 20rpx;">
								<view style="width: 25%; height: 100%; float: left; ">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/yh.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;">银行</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; ">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/jd.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;">酒店</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; ">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/gy.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;">公园</view>
								</view>

							</view>
							<view style="font-size: 24rpx; margin-left: 5%; margin-top: 20rpx;">
								<text style="color: #1684FC;">i企</text>
								<text style="color: #3D3D3D;">服务站</text>
							</view>
							<view style="width: 100%; height: 100rpx; margin-top: 20rpx;" @click="matTypebtn(5)">
								<view style="width: 25%; height: 100%; float: left; ">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/健康驿站@1x.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;">创享驿站</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; " @click="matTypebtn(6)">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/dq.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;">党群中心</view>
								</view>
								<view style="width: 25%; height: 100%; float: left; " @click="matTypebtn(7)">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/zh.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;">综合服务基地</view>
								</view>

							</view>
							<view style="font-size: 24rpx; margin-left: 5%; margin-top: 20rpx;">
								<text style="color: #1684FC;">其他</text>
								<text style="color: #3D3D3D;">配套</text>
							</view>
							<view style="width: 100%; height: 100rpx; margin-top: 20rpx;">
								<view style="width: 25%; height: 100%; float: left; ">
									<view style="width: 60rpx; height: 60rpx; margin: 0 auto;">
										<image src="/static/peitao/容器 570@1x.png" style="width: 100%; height: 100%;">
										</image>
									</view>

									<view style="width: 100%; text-align: center; font-size: 26rpx;">口岸</view>
								</view>


							</view>
						</view>


					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view
					style="width: 100%; height: 700rpx; background: #fff; border-top-right-radius:20px ; border-top-left-radius: 20px;">
					<view style="width: 90%; height: 100%; float: left; margin-left: 5%;">
						<view>
							<view style="float: left; margin-top: 20rpx;">筛选</view>
							<image @click="gaunbi()" src="/static/guanbi.png"
								style="margin-top: 20rpx; width: 24rpx; height: 24rpx; float: right;"></image>

						</view>
						<view class="wuyeleixin">
							<view style="font-size: 24rpx; margin-left: 5%; margin-top: 20rpx;">
								<text style="color: #1684FC;">物业</text>
								<text style="color: #3D3D3D;">类型</text>
							</view>
							<view style="margin-top: 20rpx;">
								<view class="xinxili" :class="index == 0 ? 'quabu' : 'quanbuxx'" @click="brnindex(0)">全部
								</view>
								<view class="xinxili" :class="index == 1 ? 'quabu' : 'quanbuxx'" @click="brnindex(1)">
									政府物业</view>
								<view class="xinxili" :class="index == 2 ? 'quabu' : 'quanbuxx'" @click="brnindex(2)">
									社会物业</view>
							</view>
							<view
								style="font-size: 24rpx; width: 100%; float: left; margin-left: 5%; margin-top: 20rpx;">
								距离：桂圆街道</view>
							<view style="margin-top: 20rpx;width: 100%; float: left;">
								<view class="xinxilis" v-for="(item,index) in tablist" @click="tabbtnli(index)"
									:class=" tablistindex == index ? 'mishuL' : 'quanbuxx'">{{item.name}}</view>

							</view>
							<view class="left_tab_sq">
								<view class="shangquanxli" @click="shangquanindex(index)" v-for="(item,index) in tabin"
									:class="indextab == index ? 'sqbjs': 'sqntms'">
									{{item.name}}
								</view>
							</view>
							<view class="right_tab_sq">
								<view class="wenziquyu">茂业奥特莱斯(和平路店)</view>
								<view>万象城一期(深圳万象城店)</view>
								<view>KKMALL京基百纳空间</view>
								<view>金光华广场</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<div class="mapbtn">
			<map style="width: 100%; height: 100vh;" :markers="covers" :polyline="polyline" :latitude="latitude"
				scale="17" :longitude="longitude" :scale="15">
			</map>
		</div>

		<view
			style="width: 90%; height: 421rpx; position: absolute; left: 5%; bottom: 20px; z-index: 9; background: #fff; border-radius: 20px;">
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
				<view id="demo1" class="scroll-view-item_H uni-bg-red" v-for="item in listtabbuild"
					@click="detail(item)">
					<view class="listta">
						<image :src="item.buildImg ? item.buildImg.split(',')[0] : ''" class="img_tab"></image>

						<view style="font-size: 30rpx; margin-left: 10px;">{{item.buildName}}</view>
						<view style="font-size: 26rpx; margin-left: 10px; color: #FA3320;">
							¥{{item.rentFeeStart}}-{{item.rentFeeEnd}}/㎡/月</view>
						<view style="font-size: 26rpx; margin-left: 10px;">面积: {{item.structureArea}}㎡</view>
					</view>
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				polyline: [],
				zhengce: false,
				indextab: 0,
				tabin: [{
					name: '商圈'
				}, {
					name: '地铁'
				}, ],
				tablist: [{
						name: '500m'
					}, {
						name: '1km'
					}, {
						name: '2km'
					},
					{
						name: '5km'
					},
					{
						name: '8km'
					},
					{
						name: '10km'
					}
				],
				tablistindex: 0,
				latitude: "22.54760108",
				longitude: '114.1214231',
				covers: [],
				listtabbuild: "",
			}
		},
		onLoad(options) {
			this.loalon()
			this.listtah(options.name)
			this.datadiceng = options.name
			this.matchinglist()
			this.streetlist()

			uni.request({
				url: '/static/街道坐标.json', // 注意路径
				method: 'GET',
				success: (res) => {
					const item = res.data.find(item => item.name === options.name)
					const points = []
					let sumLat = 0
					let sumLng = 0
					for (const item of item.coordinates) {
						const lng = item[0]
						const lat = item[1]

						points.push({
							longitude: lng,
							latitude: lat
						})

						sumLng += lng
						sumLat += lat
					}

					const polyline = [{
						points,
						color: "#0000FF", // 蓝色
						width: 3,
						dottedLine: true // 设置虚线
					}]

					const centerLng = sumLng / item.coordinates.length
					const centerLat = sumLat / item.coordinates.length
					
					this.longitude = centerLng
					this.latitude = centerLat
					this.polyline = polyline
				},
				fail: (err) => {
					console.error(err);
				}
			});
		},
		methods: {
			listtah(e) {
				var data = {
					street: e,
					industryTag: '',
				}
				this.$rqt.buildlist(data).then(res => {
					console.log(res)
					this.listtabbuild = res.data
					var datali = res.data
					const mapMarks = datali.map(item => {
						return {
							longitude: item.longitude,
							latitude: item.latitude,
							title: item.title,
							iconPath: item.buildImg,
							width: 30, //自定义图标宽
							height: 30, //自定义图标高
							joinCluster: true,

							//自定义坐标点内容展示
							callout: {
								content: item.buildName,
								color: '#000',
								bgColor: '#fff',
								padding: 6,
								borderRadius: 100,
								display: 'ALWAYS',
								textAlign: 'center',
								fontSize: 12
							},


						}
					})

					this.covers = mapMarks
				})
			},
			streetlist() {
				this.$rqt.streetlist().then(res => {
					console.log(res.data, 222222222)
				})
			},
			matTypebtn(e) {
				this.matType = e
				this.matchinglist()
			},
			matchinglist() {
				var data = {
					matchingType: this.matType
				}
				this.$rqt.matchinglist(data).then(res => {
					console.log(res.data)

				})
			},
			zhengcetop() {
				this.zhengce = true
			},
			gaunbi() {
				this.$refs.popup.close()
			},
			shangquanindex(e) {
				this.indextab = e
			},
			brnindex(e) {
				this.index = e
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			toggles(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popups.open(type)
			},
			tabbtnli(e) {
				this.tablistindex = e
			},
			fanhui() {
				uni.navigateBack()
			},
			detail(e) {
				uni.setStorageSync('btn', JSON.stringify(e))
				uni.navigateTo({
					url: '/pages/home/homedetail'
				})
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			loalon() {
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: function(res) {
				// 		console.log('当前位置的经度：' + res.longitude);
				// 		console.log('当前位置的纬度：' + res.latitude);
				// 	}
				// });

			}
		}
	}
</script>

<style scoped>
	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 50%;
		height: 180px;
		font-size: 36rpx;
		margin-top: 20px;
		margin-left: 20px;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 20rpx;
		box-shadow: 0px 1px 10px 0px rgba(199, 210, 228, 0.5);
	}

	.fanhui_betn {
		width: 76rpx;
		height: 76rpx;
		float: left;
		background: #fff;
		border-radius: 5px;
		margin-top: 10rpx;
	}

	.img_fanbtn {
		width: 32rpx;
		height: 32rpx;
		float: left;
		margin-top: 23rpx;
		margin-left: 23rpx;
	}

	.fanhui_betns {
		width: 100rpx;
		height: 100rpx;
		float: left;
		border-radius: 5px;

	}

	.listta {
		width: 100%;
		height: 200px;

		float: left;
	}

	.img_tab {
		width: 100%;
		height: 50%;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.wuyeleixin {
		width: 100%;
		height: 572rpx;
		border-radius: 25rpx;
		opacity: 1;
		margin-top: 20rpx;
		float: left;
		background: rgba(255, 255, 255, 0.9);

		box-shadow: 0px 1px 10px 0px rgba(199, 210, 228, 0.5);
	}

	.xinxili {
		width: 130rpx;
		height: 60rpx;
		border-radius: 16rpx;
		opacity: 1;
		background: #F4F6FB;
		margin-left: 20rpx;
		float: left;
		text-align: center;
		line-height: 60rpx;
		font-size: 26rpx;
	}

	.xinxilis {
		width: 90rpx;
		height: 45rpx;
		border-radius: 22.5px;
		opacity: 1;
		background: #F4F5F7;
		margin-left: 20rpx;
		float: left;
		text-align: center;
		line-height: 45rpx;
		font-size: 26rpx;
	}

	.mishuL {
		color: #1684FC;
	}

	.quabu {
		color: #fff;
		background: #1684FC;

	}

	.quanbuxx {
		color: #000;
	}

	.left_tab_sq {
		width: 30%;
		height: 300rpx;
		background: #f6f5f5;
		float: left;
		margin-top: 20rpx;
	}

	.right_tab_sq {
		width: 70%;
		height: 300rpx;
		float: left;
		margin-top: 20rpx;
		font-size: 26rpx;
		text-align: center;
	}

	.shangquanxli {
		width: 100%;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
	}

	.wenziquyu {
		color: #1684FC;
	}

	.sqbjs {
		background: #fff;
		border-left: 1rpx solid #1684FC;
	}

	.sqntms {

		border-left: 1rpx solid #fff;
	}

	.mapbtn .amap-marker .amap-icon img {
		border-radius: 100px !important;
	}
</style>